[DAY-19] Angular架構與學習資源介紹

11th鐵人賽 angular

tso1158687

團隊你是不是不會

2019-10-05 22:31:02

2325 瀏覽

分享至

終於來到介紹Angular的尾聲。可能會產生一個疑問，為什麼不是在一開始的時候介紹Angular的架構，難道是架構不重要嗎？

我的回答是：不，架構非常重要。但是要對Angular產生興趣更重要
本系列文希望可以在不需要太多先備知識的情況下，可以快速體驗到Angular強大的地方，對Angular產生興趣之後，再來研究比較枯燥但卻非常重要的基礎部分

這是AngularCLI產出來的專案結構

e2e
處理整個專案測試的資料夾，在本次我們不會講到有關於測試的部分
node_modeules
透過npm install所安裝的相依套件
src
Angular專案最主要的地方，等下會在下方再詳細講解這個資料夾
.editorconfig
對於專案的編輯器設定選項，例如：縮排要以tab縮排或是以空白鍵縮排
.gitignore
設定什麼檔案不會進入版本控制，例如；node_modules資料夾就不會被版本控制
angular.json
紀錄Angular的專案設定，例如：Angular專案進入點在哪裡、外部樣式的設定、編譯成正式或測試產品的編譯選項等等
browserlist
karma.conf.js
package-lock.json
紀錄開發者實際在nom install 安裝相依的套件實際安裝的內容與版本
package.json
紀錄專案的基本資訊，例如專案的名稱、版本，還有專案會使用到的相依套件等等資訊
README.MD
關於我的檔案，一般來說來說會寫下關於這個專案的相關說明，使用markdoen格式
tsconfig.app.json
Typescripe編譯成Javascript時的編譯設定
tsconfig.json
Typescripe編譯成Javascript時的編譯設定
tsconfig.spec.json
測試檔案
tslint.json
Typescript的語法檢查設定，專案建立時，已經使用Typescript的推薦設定。tslint可以幫你做靜態程式碼分析，
例如:function名稱是不是打錯（常見大小寫錯字或是拼錯字）、變數適不適和定義的型別一致，變數定義為數字，卻指定為字串等等
這些錯誤tslint都會幫你找出來，提升攥寫程式碼的品質。

src資料夾裡面

App-routing.module.ts
管理整個專案最高層級的路由設定
App.component.html
最主要元件的html檔案
App.component.scss
最主要元件的樣式檔案，其作用範圍僅在這個元件的內容
App.component.spec.ts
最主要元件的測試檔案，在本次主題將不會討論到測試
App component.ts
最主要元件的邏輯檔案
App.module.ts
整個專案最主要的根模組
Assets
翻譯為中文為資產，也就是放一些雜七雜八的檔案的地方，例如：圖片、多媒體案等等的地方
Environments
設定整個專案的環境變數的地方，可以為測試環境和正視環境加上整體全域不同的環境變數
Favicon.ico
網站的icon，預設是Angular的圖示，如果不喜歡就可以把他替換掉
index.html
網站的主要入口，一般來說不太會更動到此頁面
Main.ts
angular程式的進入點，一般來說也不太會去修改這個程式
Polyfills.ts
pollyfill是負責幫助angular去支援比較舊版的瀏覽器，可以載入pollyfill的特性讓舊瀏覽器也可以支援新式瀏覽器所支援的特性
Style.scss
整個專案最主要的樣式檔，樣式檔的設定為全域通用
Test.ts
寫測試專用的檔案，在本次主題將不會討論到測試

在前篇文章介紹Angular的優點時有提到，Angular是個高度模組化的框架，可以像樂高一樣自由組合。而組合的基本單位稱為元件（Component），一個元件裡面通常會包含三個檔案：

*.component.html
*.component.ts
*.component.scss

如果有設定需要測試的話會再多一個

*.component.spec.ts

Angular系列的基礎介紹在此告一段落。先前的介紹已經足以建構符合大部分需求的頁面，但是還是有很多基礎而且很厲害的觀念沒有提到。例如:什麼是NgModule、Angular的生命週期(life circle)等等。
因此在這邊推薦Angular的學習資源，可以學習到更多Angular的知識、架構、觀念。